<template>
	<!-- 未支付订单 -->
	<view class="paymentsInfo">
		<!-- 未支付商品信息 -->
		
			

			<view class="goodsinfo">
				<view class="image">
					<u--image
						:src="orderContent.image"
						width="80px" height="80px"></u--image>
				</view>
				<view class="goodsname">{{orderContent.storeName}}</view>
				<view class="goodsprice">
					<view>￥{{orderContent.price}}</view>
					<text>{{orderContent.cartNum}}件</text>
				</view>
			</view>

			<view class="total">
				<view class="totalprice">
					【待付款】共{{orderContent.cartNum}}件商品， 总金额：<text>{{orderContent.cartNum*orderContent.price}}</text>
				</view>
			</view>
			<view class="paymentsclick">
				<button class="paymentsbtn1">取消订单</button>
				<button class="paymentsbtn2">立即支付</button>

			</view>
	
	</view>

</template>

<script>
	import {
		methods
	} from 'uview-ui/libs/mixin/mixin'
	export default {
		props: {

			orderContent: {
				type: Object,
				default: () => {

				}
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}

	}
</script>

<style lang="scss">
	

		.goodsinfo {
			display: flex;
			text-align: center;
			padding: 10px;

			.image {
				flex: 1;
			}

			.goodsname {
				flex: 3;
				font-size: 12px;
				padding: 0px 3px;
				text-align: left;
			}

			.goodsprice {
				flex: 1;
				font-size: 14px;
				color: #dedede;
			}

		}

		.totalprice {
			padding: 20px 0px;
			text-align: right;

			text {
				color: red;
			}
		}

		.paymentsclick {
			display: flex;

			.paymentsbtn1 {
				border: 1px solid #ccc;
				background-color: white;
				border-radius: 25px;
				height: 30px;
				color: #dedede;
				text-align: center;
				line-height: 30px;
				font-size: 14px;

			}

			.paymentsbtn2 {
				background-color: red;
				border-radius: 25px;
				line-height: 30px;
				font-size: 14px;
				height: 30px;
				color: white;
				text-align: center;
			}
		}
	
</style>
